<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>光影缝隙</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<include file="common/tag"/>
		<link href="/static/plugin/videojs/css/video-js.min.css" rel="stylesheet">
		<script src="/static/plugin/videojs/js/video.min.js"></script>
	</head>
	<style>
		.yui_row{
			margin-left:-5px;
			margin-right:8px
		}
		body{
			background-color:#fff
		}
		.yui_md{
			margin-left: 10px;
			margin-top: 10px;
			margin-bottom: 10px;
			float: left;
		}
		.yui_rd{
			margin-right: 20px;
			margin-top: 10px;
			margin-bottom: 10px;
			float: right;
		}
		.yui_label{
			margin-left: 5px;
		}
	</style>
	<body>
		<!--页面头-->
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
			</script>

			<ul class="breadcrumb">
				<li>
					<i class="icon-home home-icon"></i>
				<li class="active">光影缝隙管理</li>
				</li>
			</ul><!-- .breadcrumb -->
		</div>

		<div class="yui_md">
			<button class="btn btn-primary" id="yui_add">
				<i class="icon-film align-top bigger-125"></i>
				上传
			</button>
		</div>

		<div class="yui_md">
			<button class="btn btn-danger" id="yui_all_del">
				<i class="icon-remove align-top bigger-125"></i>
				批量删除
			</button>
		</div>

		<div class="yui_rd">
			<a href="javascript:location.reload()"><span class="label label-xlg label-primary arrowed arrowed-right">重载</span></a>
		</div>



		<div class="row yui_row">
			<div class="col-xs-12">
				<div class="table-header">
					光影缝隙管理列表
				</div>

				<div class="table-responsive">
					<table id="yui_table" class="table table-striped table-bordered table-hover">
						<thead>
						<tr>
							<th class="center">
								<label>
									<input type="checkbox" class="ace" />
									<span class="lbl"></span>
								</label>
							</th>
							<th>视频标题</th>
							<th>标签</th>
							<th>标注</th>
							<th>浏览量</th>
							<th>更新时间</th>
							<th>状态</th>
							<th></th>
						</tr>
						</thead>

						<tbody>
						<foreach name="data" item="vo">
							<tr>
								<td class="center">
									<label>
										<input type="checkbox" class="ace" value="{$vo.id}"/>
										<span class="lbl"></span>
									</label>
								</td>

								<td><span class="label label-lg label-pink arrowed-right">{$vo.name}</span></td>
								<td><span class="label label-lg label-yellow arrowed-in">{$vo.label}</span></td>
								<td>
									<script>
                                        var lables_info=['yui_label badge badge-success','yui_label badge badge-warning','yui_label badge badge-danger','yui_label badge badge-info','yui_label badge badge-inverse'];
                                        var tags='{$vo.tags}';
                                        tags=tags.split('-');
                                        for (i=0;i<tags.length;i++){
                                            document.write("<span class='"+lables_info[i%5]+"'>"+tags[i]+"</span>");
										}
									</script>
								</td>
								<td><span class="badge badge-inverse">{$vo.read_num}</span></td>
								<td><span class="label label-danger arrowed-in">{$vo.updated_at|date='Y-m-d H:i:s',###}</span></td>
								<td>
									<eq name="vo.status" value="0">
										<span class="badge badge-grey">禁用</span>
										<else/>
										<span class="badge badge-success">开启</span>
									</eq>
								</td>

								<td>
									<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">

										<a class="info yui_open" onclick="yui_open('{$vo.name}','{$vo.url}')">
											<i class="icon-eye-open bigger-130"></i>
										</a>

										<a class="green yui_edit" onclick="yui_edit('{$vo.id}')">
											<i class="icon-pencil bigger-130"></i>
										</a>

										<a class="red yui_del" onclick="yui_del('{$vo.id}')">
											<i class="icon-trash bigger-130"></i>
										</a>

									</div>
								</td>

							</tr>
						</foreach>
						</tbody>
					</table>
				</div>
			</div>
		</div>


		<script src="/static/plugin/ace/js/jquery.dataTables.min.js"></script>
		<script src="/static/plugin/ace/js/jquery.dataTables.bootstrap.js"></script>
		<include file="common/js"/>
		<script type="text/javascript">

			function yui_open(video_name,video_url) {
                var index =layer.open({
                    title: video_name,
                    btn:[],
                	content: '<video id="my-video" class="" controls preload="auto" width="100%" height="100%" data-setup="{}">'+
						'<source src="'+video_url+'" type="video/mp4">'+
						'<p class="vjs-no-js">浏览器不支持播放</p></video>'
                });
                layer.full(index);
            }

            function yui_edit(id) {
                var url="/index.php/admin/video/video_edit?id="+id;
                layer.open({
                    type: 2,
                    area: ['700px','550px'],
                    title: '修改光影缝隙',
                    content: url
                });
            }

            function yui_del(id) {
                layer.open({
                    title: '提示',
                    content: '确认删除数据'
                    ,yes: function(index, layero){
                        var ids=new Array();
                        ids.push(id);
                        $.post("/index.php/admin/video/video_del",
                            {
                                ids:ids
                            },
                            function(data,status){
                                if (data['code']==1){
                                    layer.open({
                                        title: '提示',
                                        content: '操作成功'
                                        ,yes: function(index, layero){
                                            location.reload();
                                        },cancel: function(){
                                            location.reload();
                                        }
                                    });
                                }else{
                                    layer.msg(data['text']);
                                }
                            }, "json"
                        );
                    }
                });
            }

			$(function() {
                //新增界面
                $('#yui_add').on('click' , function(){
                    var url="/index.php/admin/video/video_add";
                    layer.open({
                        type: 2,
                        area: ['700px','550px'],
                        title: '新增光影缝隙',
                        content: url
                    });
                });

                //批量删除
				$("#yui_all_del").on('click', function () {
                    var ids=new Array();
                    $("input[type='checkbox']").each(function(i){
                        if($(this).is(':checked') == true){
                            if ($(this).val()!="on")
                                ids.push($(this).val());
                        }
                    });
                    if (ids.length==0){
                        layer.msg("未选择数据",{time:1000});
					}else{
                        layer.open({
                            title: '提示',
                            content: '确认批量删除数据'
                            ,yes: function(index, layero){
                                //获取本行id
                                $.post("/index.php/admin/video/video_del",
                                    {
                                        ids:ids
                                    },
                                    function(data,status){
                                        if (data['code']==1){
                                            layer.open({
                                                title: '提示',
                                                content: '操作成功'
                                                ,yes: function(index, layero){
                                                    location.reload();
                                                },cancel: function(){
                                                    location.reload();
                                                }
                                            });
                                        }else{
                                            layer.msg(data['text']);
                                        }
                                    }, "json"
                                );
                            }
                        });
					}
                });

			})

		</script>
	</body>
</html>
